<template>
  <div>
    <div class="center">
      <!-- 左侧 -->
      <div class="box-body-1">
        <!-- 票基本信息 -->
        <div class="box1">
          <div class="box1-top">
            <span class="sp1">
              <span>{{ trains.departureStation }}-----</span>
              <span>{{ trains.arrivalStation }}</span>
            </span>
            <div class="xzq">
              <span class="sp2"
                >席位：<span>{{
                  trains.seatType == "0"
                    ? "无座"
                    : trains.seatType == "1"
                    ? "硬座"
                    : trains.seatType == "2"
                    ? "软座"
                    : trains.seatType == "3"
                    ? "硬卧"
                    : trains.seatType == "4"
                    ? "软卧"
                    : trains.seatType == "5"
                    ? "包厢硬座"
                    : trains.seatType == "6"
                    ? "高级软卧"
                    : trains.seatType == "7"
                    ? "一等软座"
                    : trains.seatType == "8"
                    ? "二等软座"
                    : trains.seatType == "9"
                    ? "商务座"
                    : trains.seatType == "A"
                    ? "高级动卧"
                    : trains.seatType == "E"
                    ? "特等软座"
                    : trains.seatType == "F"
                    ? "动卧"
                    : trains.seatType == "H"
                    ? "一人软包"
                    : trains.seatType == "I"
                    ? "一等卧"
                    : trains.seatType == "J"
                    ? "二等卧"
                    : trains.seatType == "M"
                    ? "一等座"
                    : trains.seatType == "O"
                    ? "二等座"
                    : trains.seatType == "P"
                    ? "特等座"
                    : trains.seatType == "Q"
                    ? "多功能座"
                    : "特等座"
                }}</span></span
              >
              <!-- 席位 -->
              <!-- <div>{{ trains.trainNumber }}</div> -->
            </div>
            <div>
              发车日期：{{ trains.departureDate }} {{ trains.departureTime }}
            </div>
          </div>
          <div class="box1-body">
            <div class="body" style="width:100px">
              <div>车次：{{ trains.trainNumber }}</div>
              <!-- <div>城际</div> -->
            </div>
            <div class="body" style="width:100px">
              <div>出发时间 →</div>
              <div>到达时间 →</div>
            </div>
            <div class="body" style="width:auto">
              <div>
                {{ trains.departureDate }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                  trains.departureTime
                }}
              </div>
              <div>
                {{ trains.departureDate }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                  trains.arrivalTime
                }}
              </div>
            </div>
            <div class="body">
              <div>历时：{{ trains.runningTime }}</div>
            </div>
          </div>
        </div>
        <!-- 乘客信息 -->
        <div class="box2">
          <div class="box1">
            <div class="box1-top">
              <span class="sp1">乘车人</span>
            </div>
            <!-- 乘客信息 -->
            <div class="ticket">
              <!-- 单个乘客信息循环 -->
              <div v-for="(item, index) in trainsList" :key="index">
                <div>
                  <span style="margin-left: 20px"
                    >姓名: <span>{{ item.passengerName }}</span></span
                  >
                  <span style="margin-left: 20px"
                    >证件号：<span>{{ item.idNumber }}</span></span
                  >
                  <span style="margin-left: 20px">{{
                    item.ticketType == "adult" ? "成人票" : "儿童票"
                  }}</span>
                  <!-- <span style="margin:0 0 0 20px;">座位：{{ item.trainBox }}{{item.seatNo}}</span> -->
                  <span style="margin-left: 20px"
                    >席位：<span>{{
                      trains.seatType == "0"
                        ? "无座"
                        : trains.seatType == "1"
                        ? "硬座"
                        : trains.seatType == "2"
                        ? "软座"
                        : trains.seatType == "3"
                        ? "硬卧"
                        : trains.seatType == "4"
                        ? "软卧"
                        : trains.seatType == "5"
                        ? "包厢硬座"
                        : trains.seatType == "6"
                        ? "高级软卧"
                        : trains.seatType == "7"
                        ? "一等软座"
                        : trains.seatType == "8"
                        ? "二等软座"
                        : trains.seatType == "9"
                        ? "商务座"
                        : trains.seatType == "A"
                        ? "高级动卧"
                        : trains.seatType == "E"
                        ? "特等软座"
                        : trains.seatType == "F"
                        ? "动卧"
                        : trains.seatType == "H"
                        ? "一人软包"
                        : trains.seatType == "I"
                        ? "一等卧"
                        : trains.seatType == "J"
                        ? "二等卧"
                        : trains.seatType == "M"
                        ? "一等座"
                        : trains.seatType == "O"
                        ? "二等座"
                        : trains.seatType == "P"
                        ? "特等座"
                        : trains.seatType == "Q"
                        ? "多功能座"
                        : "特等座"
                    }}</span></span
                  >
                </div>
                <!-- <div class="CK-2">
                  <span style="margin-left: 20px"
                    >手机号：<span>{{item.orderItemID}}</span></span
                  >
                </div> -->
              </div>
            </div>
          </div>
          <!-- 联系人信息 -->
          <div class="box3">
            <div class="box1">
              <div class="box1-top">
                <span class="sp1">联系人信息 </span>
              </div>
              <div class="body3">
                <span
                  >姓名: <span>{{ trains.contactName }}</span></span
                >
                <span
                  >手机号码: <span>{{ trains.contactPhone }}</span></span
                >
                <span class="TS">取票方式 <span>自取</span></span>
              </div>
            </div>
          </div>

          <!-- 订单 -->
          <div class="box3">
            <div class="box1-top box1" style="margin-top:20px;border-bottom:0">
              <span class="sp1">支付</span>
            </div>
            <div class="box1" style="margin-top:0; padding:0 20px">
              <!-- 支付信息 -->
              <div style="display: flex; padding: 10px" class="building1">
                <span style="font-size: 14px">支付订单号：</span>
                <span class="xunaran" style="margin: 0 20px 0 0">{{
                  trains.orderId
                }}</span>
                <span style="font-size: 14px">支付金额:</span>
                <span class="xunaran">￥{{ trains.actualPayAmount }}</span>
                <!-- <span style="font-size: 14px">会员的余额:</span>
                <span class="xunaran">111</span> -->
                <!-- 选择支付方式 -->
                <div style="margin-right:12px">
                  会员金币数：{{
                    trains.userSpeciesNumber ? trains.userSpeciesNumber : 0
                  }}
                </div>
                <div>
                  会员预留款：{{
                    trains.userMoneyNumber ? "￥" + trains.userMoneyNumber : "￥" + 0
                  }}
                </div>
              </div>
              <!-- 是否使用预留款 -->
              <div
                style="display: flex; padding: 10px"
                v-if="
                  trains.userMoneyNumber != 0
                "
              >
                <div style="margin: 0 20px 0 0">使用预留款金额:</div>
                <el-input
                  @input="inputaside($event,'useManey')"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  style="width: 100px"
                  size="mini"
                  v-model="useManey"
                  placeholder=""
                ></el-input>
                <div style="color: red">注：不使用预留款时请填0</div>
              </div>
              <!-- 是否使用金币 -->
              <div
                style="display: flex; padding: 10px"
                v-if="
                  trains.userSpeciesNumber != 0
                "
              >
                <div style="margin: 0 20px 0 0">使用金币:</div>
                <el-input
                  @input="inputaside($event,'useGold')"
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  style="width: 100px"
                  size="mini"
                  v-model="useGold"
                  placeholder=""
                ></el-input>
                <div style="color: red">注：不使用预留款时请填0</div>
              </div>
              <!-- 选择支付方式 -->
              <div class="pay" style="padding: 10px; display: flex">
                <span style="margin: 0 20px 0 0">选择支付方式:</span>
                <div class="block">
                  <!-- <span class="demonstration"></span> -->
                  <el-select
                    v-model="shipvalue"
                    size="mini"
                    style="margin-right: 10px"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in shipList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="body5" v-show="yinhangka">
                <!-- 上 -->
                <!-- 中 -->
                <div class="building">
                  <span>已有银行卡</span>
                  <el-select
                    clearable
                    size="mini"
                    v-model="cardList.bankId"
                    @change="changeBankId"
                    @clear="changeBankId"
                    style="width: 140px"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in bankSelList"
                      :key="item.bankId"
                      :label="item.bankName"
                      :value="item.bankId"
                    >
                    </el-option>
                  </el-select>
                  <span>卡类型</span>
                  <el-select
                    v-model="type"
                    size="small"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  
                </div>
                <!-- 下 -->
                <div style="display: flex" class="building">
                  <span style="font-size: 12px">持卡人:</span>
                  <el-input
                    v-model="cardList.cardholder"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  >
                  </el-input>
                  <span style="font-size: 12px">身份证:</span>
                  <el-input
                    v-model="cardList.custCertificateNo"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  >
                  </el-input>
                </div>
                <div style="display: flex" class="building">
                  <span style="font-size: 12px">卡号:</span>
                  <el-input
                    v-model="cardList.cardNumber"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  >
                  </el-input>
                  <span style="font-size: 12px">手机号:</span>
                  <el-input
                    v-model="cardList.contractPhoneOne"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  >
                  </el-input>
                  <!-- <span v-if="this.type == 'creditcard'" style="font-size: 12px">银行编码:</span>
                  <el-input
                    v-if="this.type == 'creditcard'"
                    v-model="cardList.bankCode"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  ></el-input> -->
                </div>
                <div
                  v-if="this.type == 'creditcard'"
                  style="display: flex"
                  class="building"
                >
                  <span style="font-size: 12px">有效期：</span>
                  <el-date-picker
                    size="small"
                    v-model="cardList.creditCardTime"
                    type="month"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <span style="font-size: 12px">CVV:</span>
                  <el-input
                    v-model="cardList.Cvv2"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  ></el-input>
                  <span style="font-size: 12px">交易备注:</span>
                  <el-input
                    v-model="input"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  ></el-input>
                </div>
                <div class="building">
                  <el-button @click="getaddUsrBackCard" :loading="bankSaveLoadIng" :disabled="bankSaveLoadIng" type="primary">保存银行卡</el-button>
                </div>
              </div>
              <!-- 当选择语音支付时显示   v-if="shipvalue=='yuyin'"   -->
              <div style="padding: 10px" v-if="shipvalue == 'yuyin'">
                <div style="display: flex" class="building">
                  <span style="font-size: 12px; margin: 0 20px 0 0"
                    >持卡人:</span
                  >
                  <el-input
                    v-model="voicepayList.cardholder"
                    placeholder="请输入内容"
                    style="width: 180px; margin: 0 20px 0 0"
                    size="small"
                  >
                  </el-input>
                  <span style="font-size: 12px; margin: 0 20px 0 0"
                    >身份证:</span
                  >
                  <el-input
                    v-model="voicepayList.custCertificateNo"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  >
                  </el-input>
                </div>
                <div style="display: flex" class="building">
                  <span style="font-size: 12px; margin: 0 20px 0 0">卡号:</span>
                  <el-input
                    v-model="voicepayList.cardNumber"
                    placeholder="请输入内容"
                    style="width: 180px; margin: 0 30px 0 0"
                    size="small"
                  >
                  </el-input>
                  <span style="font-size: 12px; margin: 0 20px 0 0"
                    >手机号:</span
                  >
                  <el-input
                    v-model="voicepayList.contractPhoneOne"
                    placeholder="请输入内容"
                    style="width: 180px"
                    size="small"
                  >
                  </el-input>
                </div>
              </div>
              <!-- gettainCodePay 二维码 -->
              <el-button type="primary" class="btn" @click="gopayaa"
                >立即支付</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="right_1">
          <div style="margin: 0 0 20px 0">票价信息</div>
          <div class="right_3">
            <div>票价总数</div>
            <div style="display: flex">
              <div>
                <div>
                  <p></p>
                </div>
              </div>
              <div>
                <span>{{ trains.ticketPrice }}</span>
                <span>*{{ trainsList.length }}</span>
              </div>
            </div>
          </div>
          <div class="right_3">
            <div>订票费用</div>
            <div>￥5*{{ trainsList.length }}</div>
          </div>
          <div class="right_4">
            <div>订单总额</div>
            <div style="color: red">￥{{ trains.actualPayAmount }}</div>
          </div>
          <div
            class="right_4"
            v-if="trains.userMoneyNumber != 0 && this.shipvalue != 'yuliukuan'"
          >
            <div>使用预留款后</div>
            <div style="color: red">
              ￥{{ trains.actualPayAmount - this.inputasideNum }}
            </div>
          </div>
        </div>
        <div class="right_5">
          <div>温馨提示</div>
          <hr style="margin: 10px 0 10px 0" />
          <div style="font-size: 13px">
            1.成人退票时，如名下有儿童票需一同退票
            <br /><br />
            2.由于各铁路局相关政策，火车票源紧张等原因，没办法保证100%出票成功，
            请以收到短信为准。如果出票失败，所有票款会在3-7个工作日退回到您支付账户中
            ，请放心支付。<br /><br />
            3.自3月1日起，铁路对互联网购票实行实名信息验证，请您填写真实有效证件信息。
            如因证件信息未通过验证造成购票失败，敬请谅解。<br /><br />
            4.只支持二代身份证，儿童票先按成人票款，出票成功再返回。<br /><br />
          </div>
        </div>
      </div>
      <el-dialog
        title="支付"
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        width="30%"
        center
      >
        <div class="index-body">
          <span style="margin: 0 0 0 20px; color: red">
            二维码有效期10分钟（请尽快支付）</span
          ><br />
          <span> 操作步骤：</span><br />
          <span> 1、将二维码截图发给客户</span><br />
          <span> 2、待客户扫码支付成功</span><br />
          <span> 3、点击确认按钮跳转订单页面查看是否支付成功或出票成功</span>
          <div class="qrcode">
            <img :src="this.qrcodeNum" alt="" />
            <!-- 这里的src的值就是生成的二维码的地址 -->
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="goDetailstvoic">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 语音弹窗 -->
      <el-dialog
        title="支付"
        :visible.sync="centerDialogtvoic"
        :close-on-click-modal="false"
        width="30%"
        center
      >
        <div style="margin: 20px 0 0 30px">
          {{ this.tvoicemsg }}
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogtvoic = false">取 消</el-button>
          <el-button type="primary" @click="goDetailstvoic">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  name: "trainReserve",
  data() {
    return {
      indexrow: {},
      parmasbillQrCode: "",
      centerDialogtvoic: false,
      // 正常订单语音支付成功后返回的数据
      tvoicemsg: "",
      // 语音表单
      voicepayList: {
        contractPhoneOne: "",
        cardNumber: "",
        custCertificateNo: "",
        cardholder: "",
      },
      // 预留款
      useManey:0,
      // 金币
      useGold: 0,
      inputasideNum: null,
      nVlist: "",
      shipList: [
        {
          value: "yinhangka",
          label: "银行卡",
        },
        {
          value: "erweima",
          label: "二维码",
        },
        // {
        //   value: "yuyin",
        //   label: "语音支付",
        // },
      ],
      shipvalue: "",
      yinhangka: false,
      erweima: false,
      yuyin: false,
      centerDialogVisible: false,
      payaList: {},
      type: "",
      input: "",
      customerId: "",
      // 订单号
      train: "",
      type: "",
      url: "", //识别二维码后跳转的地址或文本
      qrcodeNum: "", //存储二维码图片的路径
      trainsLista: {},
      trainsList: [],
      trains: {},
      bankSaveLoadIng:false,
      cardList: {
        bankId:"",
        custCertificateNo: "",
        contractPhoneOne: "",
        cardNumber: "",
        cardholder: "",
        creditCardTime: "",
        Cvv2: "",
        bankCode:"",
      },
      options: [
        {
          value: "creditcard",
          label: "信用卡",
        },
        {
          value: "debitcard",
          label: "借记卡",
        },
      ],
      bankSelList:[],
      // 支付方式
      payType: "",
      // 支付方式单选框
      radio: "1",
      // 是否保存单选框
      radios: "1",
      label: "",
      value: "",
    };
  },
  props: {},
  components: {},

  watch: {
    // 监听配送方式
    shipvalue(nV, oV) {
      console.log(nV);
      this.nVlist = nV;
      if (nV == "yinhangka") {
        this.yinhangka = true;
        this.erweima = false;
        this.yuyin = false;
        this.payType = nV;
        console.log(this.payType);
      } else if (nV == "erweima") {
        this.erweima = true;
        this.yinhangka = false;
        this.yuyin = false;
        this.payType = nV;
        // this.flightTicketList();
      } else if (nV == "yuyin") {
        this.showRetain = true;
        this.yinhangka = false;
        this.yuyin = false;
        this.payType = nV;
      } else if (nV == "yuliukuan") {
        this.payType = nV;
      }
    },
  },
  methods: {    
    getaddUsrBackCard(){
      this.bankSaveLoadIng = true;
      let parma = {
        //用户id
        userId:this.trains.userId,
        // 银行卡类型
        cardType: this.type,
        // 姓名
        cardholder: this.cardList.cardholder,
        // 身份证号
        userCertificate: this.cardList.custCertificateNo,
        userType:"ZGJMSFZ",
        // 手机号
        reservePhone: this.cardList.contractPhoneOne,
        // 银行卡号
        cardNumber: this.cardList.cardNumber,
      }
      if( this.type == "creditcard") parma["CVV2"] = this.cardList.Cvv2
      if( this.type == "creditcard") parma["creditFailureDate"] = this.cardList.creditCardTime
      if( this.type == "creditcard") parma["bankCode"] = this.cardList.bankCode
      this.$axios.getBankCardById({
        cardNumber:parma.cardNumber
      }).then((res)=>{
        if(res.code == "00000"){
          parma["bankId"] = res.data.id;
          parma["bankName"] = res.data.bankName;
          this.$axios.getaddUsrBackCard(parma).then((res)=>{
            this.bankSaveLoadIng = false;
            if (res.code == "00000") {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.getUsrBackCardList();
            }
          })
        }
      })
    },
    getUsrBackCardList(){
      this.$nextTick(()=>{
        this.$axios.getUsrBackCardList({userId: this.trains.userId,}).then((res)=>{
          if(res.code == "00000"){
            this.bankSelList = [].concat(res.data) 
          }else{
            console.log("错误")
          }
        })
      })
    },
    changeBankId(val){
      this.cardList.bankId = val;
      let obj = {};
      if(val){
        obj = this.bankSelList.filter((item)=>{
          if(item.bankId == val) return item;
        })[0];
      }
      if(obj.cardholder) this.cardList.cardholder = obj.cardholder;
      else this.cardList.cardholder = "";
      if(obj.cardNumber) this.cardList.cardNumber = obj.cardNumber;
      else this.cardList.cardNumber = "";
      if(obj.cardType) this.type = obj.cardType;
      else this.type = "";
      if(obj.userCertificate) this.cardList.custCertificateNo = obj.userCertificate;
      else this.cardList.custCertificateNo = "";
      if(obj.reservePhone) this.cardList.contractPhoneOne = obj.reservePhone;
      else this.cardList.contractPhoneOne = "";
      if(obj.cvv2) this.cardList.Cvv2 = obj.cvv2;
      else this.cardList.Cvv2 = "";
      if(obj.creditFailureDate && obj.creditFailureDate != "请选择有效期") this.cardList.creditCardTime = obj.creditFailureDate;
      else this.cardList.creditCardTime = "";
      if(obj.bankCode) this.cardList.bankCode = obj.bankCode;
      else this.cardList.bankCode = "";
    },
    // 获取预留款的事件
    inputaside(row,type) {
      console.log(this.useGold,this.useManey)
      this.inputasideNum = this.useGold*1 + this.useManey*1;
      if (this.trains.actualPayAmount < this.inputasideNum) {
        this.$message({
          message: "使用预留款和金币不得大于订单总价",
          type: "warning",
        });
        this.useGold = 0;
        this.useManey = 0;
        return;
      }
      if ( type == 'useGold' && this.trains.userSpeciesNumber < this.useGold*1) {
        this.useGold = this.trains.userSpeciesNumber;
        this.$message({
          message: "使用金币不得大于预留款现有金额",
          type: "warning",
        });
      }
      if( type == 'useManey' && this.trains.userMoneyNumber < this.useManey*1){
        this.useManey = this.trains.userMoneyNumber;
        this.$message({
          message: "使用金额不得大于预留款现有金额",
          type: "warning",
        });
      }
    },
    prompt() {
      this.$confirm("请选择支付方式", "提示", {
        confirmButtonText: "确定",
        type: "warning",
      });
    },

    // 保险弹窗
    open() {
      this.$confirm(
        "平安高速铁路乘客意外伤害保险简称“高铁乘意险”，是指中国平安财产保险股份,有限公司经中国保监会核准经营的，若被保险人在乘坐高速铁路（以下简称为高铁）期,间因遭受意外伤害事故导致身故、伤残或医疗费用支出的，保险人依照保险合同约定给,付保险金的一种保险产品。,投保须知,1、保障区域：中国大陆地区（不含港澳台地区）。,2、适用投保人群：本产品仅限年龄0-70周岁的人士。,3、每张火车票限送1份高速铁路乘客意外伤害保险，最高保障100万元意外身故、伤残保险金；未成年人须由其父母投保，最高保障10万元意外身故、残疾。4、高铁意外险保险起间自被保险人持有效乘车凭证实名制验证或检票进站时起，至达到有效乘车凭证载明的到站检票出口时止。5、保险生效后不支持退保。退票、改签时保险合同自动解除，6、如实告知：投保人如投保本保险，应依法履行如实告知义务，否则保险人有权依据有关规定解除保险合同并不承担给付保险金责任。7、投保人不得为无行为能力人投保以死亡为给付保险金条件的人身保险，父母为其未成年子女投保的人身保险不受此规定限制，但以被保险人死亡为给付条件的保险金总合不得超过国务院保险监督管理机构规定的限额。8、除父母为其未成年子女投保的以外，本保险合同应经被保险人同意并认可保险金额，否则以死亡为给付保险金条件的条款无效，保险人不承担保险责任。9、投保本保险前，请投保人认真阅读产品页面展示内容以及相关保险条款。",
        "产品描述",
        {
          confirmButtonText: "确定",
          // cancelButtonText: '取消',
          // type: 'warning',
          center: true,
        }
      );
    },

    // 订单详情
    getqueryTrainOrder() {
      this.showLoading();
      if (this.type == "change") {
        this.$axios
          .getqueryOrderChange({
            orderId: this.train,
            // customerId: this.customerId,
            // orderNumber: '1660198224084',
            // customerId: '77',
          })
          .then((res) => {
            this.closeLoading();
            localStorage.setItem("isToken", true);
            if (res.code == "00000") {
              this.trains = res.data;
              this.trainsList = this.trains.guestInformations;
              this.trainsLista = this.trainsList[0];
            }
          });
      } else {
        this.showLoading();
        this.$axios
          .getqueryTrainOrder({
            // 修改支付类型
            orderId: this.train,
            // customerId: this.customerId,
          })
          .then((res) => {
            localStorage.setItem("isToken", true);
            if (res.code == "00000") {
              if(res.data.isOrderSuccess === "no"){
                this.$message({
                  message: '正在占座'
                });
                setTimeout(this.getqueryTrainOrder,2000) 
              }else if(res.data.isOrderSuccess === "err"){
                this.closeLoading();
                this.$message({
                  message: '占座失败'
                });
                this.$router.push({
                  name: "trainReserve",
                }); 
              }else{
                this.closeLoading();
                this.$message({
                  message: '占座成功'
                });
                this.getUsrBackCardList();
                this.trains = res.data;
                this.trainsList = this.trains.orderItemBOS;
                this.trainsLista = this.trainsList[0];
                this.trains.ticketPrice = this.trainsLista.ticketAmount;
              }
            }
          });
      }
    },
    // 正常订单语音支付
    getvoice() {
      if (
        this.voicepayList.custCertificateNo != "" &&
        this.voicepayList.contractPhoneOne != "" &&
        this.voicepayList.cardNumber != "" &&
        this.voicepayList.cardholder != ""
      ) {
        this.showLoading();
        localStorage.setItem("isToken", true);
        this.$axios
          .getvoice({
            // 订单id
            jsjOrderId: this.train,
            // 身份证号
            custCertificateNo: this.voicepayList.custCertificateNo,
            // 手机号
            contractPhoneOne: this.voicepayList.contractPhoneOne,
            // 银行卡号
            cardNumber: this.voicepayList.cardNumber,
            // 姓名
            cardholder: this.voicepayList.cardholder,
            // 会员id
            customerId: this.customerId,
            // 预留款
            amount: Number(this.inputasideNum),
            source: "Crm",
          })
          .then((res) => {
            this.closeLoading();
            
            if (res.code == "00000") {
              this.tvoicemsg = res.msg;
              this.centerDialogtvoic = true;
              //    this.$message({
              //   message: res.msg,
              //   type: 'success'
              // });
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
      } else {
        this.$message({
          message: "请填写完整信息支付",
          type: "warning",
        });
      }
    },
    // 正常订单银行卡支付
    getbankCardPay() {
      if (
        this.cardList.custCertificateNo != "" &&
        this.cardList.contractPhoneOne != "" &&
        this.cardList.cardNumber != "" &&
        this.cardList.cardholder != ""
      ) {
        if (this.type == "debitcard") {
          localStorage.setItem("isToken", true);
          this.$axios
            .getbankCardPay({
              cardType: this.type,
              orderSource: "crm",
              // 订单id
              orderId: this.train,
              // 身份证号
              userCertificate: this.cardList.custCertificateNo,
              // 手机号
              reservePhone: this.cardList.contractPhoneOne,
              // 银行卡号
              cardNumber: this.cardList.cardNumber,
              // 姓名
              cardholder: this.cardList.cardholder,
              userMoneyNumber:this.useManey*1,
              userSpeciesNumber:this.useGold*1,
              cvv2: this.cardList.Cvv2,
            }).then((res) => {
              if (res.code == "00000" && res.data.code == "1") {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.$router.push({
                  name: "trainOrder",
                }); 
              }else {
                this.$router.push({
                  name: "trainReserve",
                }); 
                this.$message({
                  message: res.data.errorMsg || res.data.msg || res.msg,
                  type: "warning",
                });
              }
            });
        } else if (
          this.type == "creditcard" &&
          this.cardList.creditCardTime != "" &&
          this.cardList.Cvv2 != ""
        ) {
          // localStorage.setItem("isToken", true);
          this.$axios.getbankCardPay({
              // 预留款
              // amount: Number(this.inputasideNum),
              // 支付类型
              cardType: this.type,
              orderSource: "crm",
              // 支付金额
              // moneyAmout: this.trains.actualPayAmount,
              // 订单id
              orderId: this.train,
              // 身份证号
              userCertificate: this.cardList.custCertificateNo,
              // 手机号
              reservePhone: this.cardList.contractPhoneOne,
              // 银行卡号
              cardNumber: this.cardList.cardNumber,
              // 姓名
              cardholder: this.cardList.cardholder,
              // 信用卡到期时间
              creditCardTime: this.cardList.creditCardTime,
              userMoneyNumber:this.useManey*1,
              userSpeciesNumber:this.useGold*1,
              cvv2: this.cardList.Cvv2,
            })
            .then((res) => {
              // 
              if (res.code == "00000" && res.data.code == "1") {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.$router.push({
                  name: "trainOrder",
                }); 
              }else {
                this.$message({
                  message: res.data.errorMsg || res.data.msg || res.msg,
                  type: "warning",
                });
              }
            });
        } else {
          this.$message({
            message: "请完整填写支付信息",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请完整填写支付信息",
          type: "warning",
        });
      }
    },
    // 二维码
    gettainCodePay() {
      if (this.parmasbillQrCode) {
        this.url = this.parmasbillQrCode;
        QRCode.toDataURL(this.url, {
          //这个this.url就是你扫码后要跳转的地址
          version: 7, //版本号
          errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
          width: 280, //设置二维码图片大小
          height: 280,
        })
          .then((url) => {
            console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
            this.qrcodeNum = url; //赋值给变量。用在img的src属性上
            console.log(this.qrcodeNum);
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "warning",
            });
          });
      } else {
        if (this.type != "change") {
          localStorage.setItem("isToken", true);
          this.$axios
            .gettainCodePay({
              orderId:this.train,
              userMoneyNumber:this.useManey*1,
              userSpeciesNumber:this.useGold*1,
              // billNo: '1652061546200',
            })
            .then((res) => {
              
              if (res.code == "00000") {
                this.$message({
                  message: res.data.errMsg,
                  type: "warning",
                });
                console.log(res.data);
                console.log(res);
                this.url = res.data.billQRCode;
                // console.log(this.url)
                QRCode.toDataURL(this.url, {
                  //这个this.url就是你扫码后要跳转的地址
                  version: 7, //版本号
                  errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
                  width: 280, //设置二维码图片大小
                  height: 280,
                })
                  .then((url) => {
                    console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
                    this.qrcodeNum = url; //赋值给变量。用在img的src属性上
                    console.log(this.qrcodeNum);
                  })
                  .catch((err) => {
                    this.$message({
                      message: err,
                      type: "warning",
                    });
                  });
              }
            });
        } else if (this.type == "change") {
          localStorage.setItem("isToken", true);
          // 改签支付订单
          this.$axios
            .gettrainRequestChangeQRCode({
              billNo: this.train,
              // billNo: '1651922008',
            })
            .then((res) => {
              
              if (res.code == "00000") {
                console.log(res.data);
                if (res.data.billQRCode) {
                  this.url = res.data.billQRCode;
                  QRCode.toDataURL(this.url, {
                    version: 7, //版本号
                    errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
                    width: 280, //设置二维码图片大小
                    height: 280,
                  })
                    .then((url) => {
                      console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
                      this.qrcodeNum = url; //赋值给变量。用在img的src属性上
                      console.log(this.qrcodeNum);
                    })
                    .catch((err) => {
                      console.error(err);
                    });
                } else {
                  this.$message({
                    message: "改签成功",
                    type: "success",
                  });
                }
              } else {
                this.$confirm("未改签成功", "提示", {
                  confirmButtonText: "确定",
                  type: "warning",
                });
              }
            });
        }
      }
    },
    goDetailstvoic() {
      this.centerDialogVisible = false;
      this.$router.push({
        name: "trainOrder",
      });
    },
    goDetails() {
      this.centerDialogVisible = false;
      this.$router.push({
        name: "trainOrderDetails",
        params: {
          orderNumber: this.train,
          customerId: this.customerId,
          type: "paya",
        },
      });
    },
    gopayaa() {
      let ordersuccess = "";
      // this.getqueryTrainOrderAgian();
      this.showLoading();
      
      this.$axios.getqueryTrainOrder({
          // 修改支付类型
          orderId: this.train,
          // customerId: this.customerId,
          // orderNumber: '1660208945086',
          // customerId: '3',
      }).then((res) => {
          this.closeLoading();
          localStorage.setItem("isToken", true);
          if (res.code == "00000") {
            ordersuccess = res.data.ordersuccess;
            if (res.data.isOrderSuccess == "yes") {
              this.gopay();
            } else {
              this.$message({
                message: "占座中请稍后支付",
                type: "warning",
              });
            }
          }
        });
    },
    gopay() {
      console.log(1);
      if(this.trains.actualPayAmount - this.inputasideNum == 0){
        this.$axios.getZeroPay({
          orderId: this.train,
          userMoneyNumber:this.useManey*1,
          userSpeciesNumber:this.useGold*1,
        }).then((res)=>{
          if (res.code == "00000" && res.data.code == "1") {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$router.push({
              name: "trainOrder",
            }); 
          }else {
            this.$message({
              message: res.data.errorMsg || res.data.msg || res.msg,
              type: "warning",
            });
            this.$router.push({
              name: "trainReserve",
            }); 
          }
        })
        return
      }
      if (this.nVlist == "") {
        this.prompt();
      }
      // trains.userSpeciesNumber
      if (this.payType == "yuliukuan") {
        if (this.trains.userSpeciesNumber >= this.trains.actualPayAmount) {
          this.showLoading();
          localStorage.setItem("isToken", true);
          this.$axios
            .getvoice({
              // 订单id
              jsjOrderId: this.train,
              // 身份证号
              custCertificateNo: "",
              // 手机号
              contractPhoneOne: "",
              // 银行卡号
              cardNumber: "",
              // 姓名
              cardholder: "",
              // 会员id
              customerId: this.customerId,
              // 预留款
              amount: Number(this.trains.actualPayAmount),
              source: "Crm",
            })
            .then((res) => {
              this.closeLoading();
              
              if (res.code == "00000") {
                this.tvoicemsg = res.msg;
                this.centerDialogtvoic = true;
                this.$router.push({
                  name: "trainOrder",
                });
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning",
                });
                this.$router.push({
                  name: "trainReserve",
                }); 
              }
            });
        } else {
          this.shipvalue = "";
          this.$message({
            message:
              "当前会员预留款金额不能支付当前订单请选择其他支付方式组合支付",
            type: "warning",
          });
        }
      }
      if (this.payType == "yuyin") {
        if (
          this.inputasideNum > this.trains.userSpeciesNumber &&
          this.trains.actualPayAmount < this.inputasideNum &&
          trains.actualPayAmount - this.inputasideNum >= 10
        ) {
          this.$message({
            message:
              "使用预留款金额不得大于用户预留款余额或订单总价,订单金额小于10元不得使用语音支付",
            type: "warning",
          });
        } else {
          this.getvoice();
        }
      }
      if (this.payType == "erweima") {
        this.centerDialogVisible = true;
        this.gettainCodePay();
      }
      if (this.payType == "yinhangka") {
        if (this.type != "") {
          this.getbankCardPay();
        } else {
          this.$message({
            message: "请选择银行卡支付类型",
            type: "warning",
          });
        }
      }
    },
    //跳出
    closeLoading() {
      this.tableLoading.close();
    },
    //进入
    showLoading() {
      this.tableLoading = this.$loading({
        text: "拼命加载数据中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.4)", //遮罩层颜色
        target: document.querySelector("#table"), //loadin覆盖的dom元素节点
      });
    },
  },

  mounted() {
    
    this.train = this.$route.params.train;
    console.log(this.train);
    // this.payaList = this.$route.params.payaList
    // console.log(this.payaList)

    this.indexrow = this.$route.params.indexrow;
    if (this.indexrow) {
      this.parmasbillQrCode = this.$route.params.indexrow.billQrCode;
    }

    this.customerId = this.$route.params.customerId;
    console.log(this.customerId);
    this.getqueryTrainOrder();
  },
};
</script>

<style scoped>
.body5 span {
  line-height: 32px;
  font-size: 12px;
  margin: 0px 10px;
}

.building {
  margin-top: 10px;
}

.building1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn {
  margin: 50px;
  float: right;
}

.right {
  margin-left: 20px;
  width: 20%;
}

.right_1 {
  padding: 20px;
}

.right_3 {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-top: 10px;
}

.right_4 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.right_5 {
  margin-top: 20px;
  background-color: #f8fbfe;
  width: 100%;
  height: 400px;
  padding: 20px;
}

.body5 {
  padding: 10px;
}

.CK-1 {
  display: flex;
  margin: 10px 0px;
}

.CK-2 {
  display: flex;
  margin: 10px 0px;
}

.box-body-2 {
  width: 300px;
  margin-top: 20px;
  margin-left: 20px;
}

.top {
  border-radius: 10px;
  border: 1px solid #ffd5a1;
  padding: 0 10px;
  background-color: #fffaed;
}

.center {
  padding: 30px;
  width: 1200px;
  margin: auto;
  display: flex;
}

.box1 {
  border: 1px solid #ccddee;
  margin-top: 14px;
}

.Fy {
  width: 238px;
  border-bottom: 1px solid #ffd5a1;
  padding: 5px 0;
}

.Fy > div {
  width: 100%;
  line-height: 24px;
}

.Fy > div .d1 {
  float: left;
}

.Fy > div .d2 {
  margin-left: 10px;
}

.sp1 {
  float: left;
  line-height: 39px;
  font-size: 18px;
  font-weight: 500;
}

.xzq {
  float: left;
  line-height: 39px;
  font-size: 12px;
  margin-left: 39px;
  margin-right: 40px;
}

.box1-top {
  background-color: #edf8ff;
  height: 39px;
  line-height: 39px;
  padding: 10px 12px;
}

.box1-top > span {
  line-height: 41px;
}

.xgcc {
  float: right;
  color: #0069ca;
}

.box1-body {
  width: 100%;
  /* width: 730px; */
  padding: 10px 0;
  display: flex;
}

.body {
  width: 145px;
  margin-left: 30px;
  font-size: 14px;
}

.body div {
  line-height: 25px;
  font-size: 16px;
}

.body2 {
  padding: 0px 10px;
}

.body2 p {
  line-height: 40px;
  margin-left: 10px;
}

.ticket {
  /* display: flex; */
  padding: 10px;
}

.body3 {
  padding-left: 20px;
  display: flex;
}

.body3 span {
  margin: 10px;
}

.TS {
  color: #717171;
  padding-left: 100px;
}

.CK {
  padding: 0px 0;
  border-bottom: 1px solid #e5e5e5;
  height: 100px;
  line-height: 24px;
}

.xunaran {
  width: 150px;
}
</style>